<template>
	<view class="cart-page qxlj_back4">
		<car-list ref="mycar" :carList="carList" @allSelBtn="allSelBtn" @navTo="handleNavTo" @selShop="selShop"
			@selGoods="selGoods" @jsbtn="jsbtn" @delbtn="delbtn" @del="handledel" @changeNum="changeNum"></car-list>
		<empty v-if="carList.length === 0 && loadingType === 'nomore'" :isfiexd="true" title="没有找到相关消息"></empty>
		<uni-load-more v-else :status="loadingType"></uni-load-more>
	</view>
</template>


<script>
	import carList from '../components/car-list.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import empty from '@/components/empty.vue'
	import {
		mapMutations
	} from 'vuex'
	import {
		forEach,
		floatAdd,
		floatMul
	} from '@/utils/tools.js'
	import {
		getProductCarList,
		addProductCar,
		delProductCar
	} from '@/api/mall.js'
	export default {
		name: "carPage",
		components: {
			carList,
			empty,
			uniLoadMore,
		},
		data() {
			return {
				maskTitle: '',
				page: {
					Index: 1,
					Size: 10
				},
				loadingType: 'more',
				carList: []
			};
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			...mapMutations(['setGoodsInfoList']),
			async loadData(type = 'add', search = {}) {
				try {
					if (type === 'add') {
						if (this.loadingType === 'nomore') {
							return;
						}
						this.loadingType = 'loading';
					} else if (type === 'refresh') {
						this.page.Index = 1
						this.loadingType = 'loading';
					} else {
						this.loadingType = 'more'
					}
					const {
						Data,
						Total
					} = await getProductCarList(this.page)
					if (type === 'refresh') {
						this.carList = []
					}
					console.log(666, Data)
					this.carList = this.carList.concat(Data.map(item => {
						const total = item.ProductInfo.reduce(function(prev, cur, index, arr) {
							return prev + cur.Num;
						}, 0)

						const goodsAmount = item.ProductInfo.reduce(function(prev, cur, index, arr) {
							return floatAdd(prev, floatMul(cur.Num, cur.Price))
						}, 0)

						console.log(goodsAmount)

						item.glist = item.ProductInfo.map(row => {
							return {
								id: row.Id,
								number: row.Num,
								price: row.Price,
								stock: 9999,
								selected: true,
								...row,
							}
						})
						return {
							total,
							goodsAmount,
							shopId: item.BusinessId,
							title: item.BusinessName,
							OrderRemak: '',
							selected: true,
							...item
						}
					}))

					if (this.carList.length < Total) {
						this.loadingType = 'more'
						this.page.Index++
					} else {
						this.loadingType = 'nomore'
					}

					this.$nextTick(function() {
						this.$refs.mycar.getAllMount(); //计算价格展示
					})


				} catch (e) {
					this.loadingType = 'nomore'
					//TODO handle the exception
				}
			},

			async handledel(id) {
				try {
					await delProductCar({
						ProductCarIdArr: id
					})
					this.$api.msg('移除成功')

					this.loadData('refresh')
				} catch (e) {
					//TODO handle the exception
				}
			},

			confirm: function() { //确定按钮
				console.log('您点击了确定按钮');
			},
			cancel: function() { //取消按钮
				console.log('您点击了取消按钮');
			},
			selGoods: function(carList) {
				var that = this;
				that.carList = carList;
			},
			selShop: function(carList) {
				var that = this;
				that.carList = carList;
			},
			allSelBtn: function(carList) {
				var that = this;
				that.carList = carList;
			},

			jsbtn: function(ids) { //结算按钮
				var that = this;

				const carList = []

				that.carList.forEach((item) => {
					let glist = item.glist.filter(row => ids.includes(row.id))
					if (glist.length > 0) {
						glist = glist.map(row => {
							return Object.assign({}, row, {
								Num: row.number
							})
						})
						carList.push(Object.assign({}, item, {
							glist
						}))
					}

				})
				console.log(carList)
				this.setGoodsInfoList(carList)
				/*
				 跳转结算页面
				*/
				uni.navigateTo({
					url: '/mall_subpages/create-order/create-order?isCart=1'
				})
			},
			delbtn: function(ids, list) { //删除按钮
				var that = this;
				/* 
				 请求接口数据
				 
				*/
				for (let i = 0; i < list.length; i++) {
					for (let k = 0; k < list[i].glist.length; k++) {
						if (list[i].glist[k].selected == true) {
							list[i].glist.splice(k, 1);
							k--
						}
					}
					if (list[i].glist.length == 0) { //若当前店铺商品删除完，删除当前店铺
						list.splice(i, 1);
						i--
					}
				}
				that.carList = list;
				that.$refs.mycar.getAllMount(list); //计算价格展示
			},
			changeNum: function(total, carList, shopIndex, gIndex, number, id, type) {
				// var that = this;
				/* 
				 请求接口数据

				*/
				carList[shopIndex].glist[gIndex].number = number;
				if (type == 0) {
					carList[shopIndex].total = total - 1;
				} else {
					carList[shopIndex].total = total + 1;
				}
				this.carList = carList;
				this.$refs.mycar.getAllMount(carList); //计算价格展示
			},
			handleNavTo(e) {
				console.log(e)
				uni.navigateTo({
					url: `/mall_subpages/goods-detail/goods-detail?id=${e.ProductId}&type=2`
				})
			}
		},
		onReachBottom() {
			this.loadData()
		},
		onShareAppMessage() {

		}
	}
</script>

<style lang="scss" scoped>
	* {
		background-color: #e9e9e9;
	}

	.cart-page {
		padding-bottom: 100rpx;
		background-color: #F0F4F3;
		min-height: 100vh;
	}
</style>